﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Style/reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#MainDiv
{
    margin:0;
    padding:0;
}
#Body_UpDiv
{
    margin:0;
    padding:0;
}
#Body_Up_MsgShow
{
    height:500px;
    margin:0;
    padding:0;
    width:80%;
    float:left;
}
#Body_Up_UserShow
{
    height:500px;
    margin:0;
    padding:0;
    width:20%;
    float:right;
}
#Body_DownDiv
{
    margin:0;
    padding:0;
}
#Body_Down_InputText
{
    margin:0;
    padding:0;
    width:80%;
    float:left;
    height:100px;
}
#Body_Down_SendButton
{
    margin:0;
    padding:0;
    width:20%;
    float:right;
    height:100px;
}
textarea
{
    margin:0;
    padding:0;
    width:100%;
    height:100px;
}
button
{
    margin:0;
    padding:0;
    width:100%;
    height:100px;
}
.liHidden
{
     display:none;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    var _Config = {
        url: "Socket/Socket.ashx",
        ListenUrl: "Socket/Listen.ashx",
        Parameter: null,
        CurrentUser: null,
        DLLastUserLoginTime: null,
        DLLastUserLoginOutTime: null
    };
    window.attachEvent('onbeforeunload', function () {
        _Config.Parameter = { _type: "UserLoginOut" };
        $.get(_Config.url, _Config.Parameter);
        alert("您已经退出系统");
    });

    $(document).ready(function () {
        UserLogin();
    });

    //用户登陆
    function UserLogin() {
        _Config.Parameter = { _type: "UserLoginIn", UserName: "TestUser"+Math.random().toString().substring(0,4) };
        $.get(_Config.url, _Config.Parameter, function (res) {
            _Config.CurrentUser = res;
            if (res != null && res["UserID"] != "") {
                GetUserList();
            }
        }, "json");
    }

    //加载用户列表
    /*
    [
    {"UserID":1,"UserName":"HuangNing","LoginTime":"\/Date(1285376237000+0800)\/"},
    {"UserID":2,"UserName":"LiuJu","LoginTime":"\/Date(1285376237000+0800)\/"},
    {"UserID":3,"UserName":"LiuJue","LoginTime":"\/Date(1285376237000+0800)\/"}
    ]
    */
    function GetUserList() {
        _Config.Parameter = { _type: "GetUserList" };
        $.get(_Config.url, _Config.Parameter, function (data) {
            
            AddUserToShow(data);
            AddListen();
        }, "json");
    }
    function AddUserToShow(data) {
        var _html = "";
        var LoginTime = new Date(); //设置最后一次下载时间
        var LoginOutTime = new Date();//最后一次下载用户退出时间
        for (var i = 0; i < data.length; i++) {
            _html += "<li id=\"liUser_" + data[i]["UserID"] + "\" class=\"liHidden\"><div><input type=\"checkbox\" id=\"cbUser_" + data[i]["UserID"] + "\" value=\"" + data[i]["UserID"] + "\" /><label for=\"cbUser_" + data[i]["UserID"] + "\">&nbsp;&nbsp;" + data[i]["UserName"] + "</label></div></li>";
            var _LoginTime = data[i]["LoginTime"].match(/^\/Date\((\d+)([-+]\d\d)(\d\d)\)\/$/);
            _LoginTime = new Date(1 * _LoginTime[1] + 3600000 * _LoginTime[2] + 60000 * _LoginTime[3]);
            if (LoginTime < _LoginTime) {
                LoginTime = _LoginTime;
            }
            //设置最开始记录用户退出时间,也就是当前列表里登陆最早的一个用户的时间
            if (LoginOutTime > _LoginTime) {
                _Config.DLLastUserLoginOutTime = _LoginTime;
            }
        }
        _Config.DLLastUserLoginTime = LoginTime;
        $("#Body_Up_UserShow_ul").append(_html).find(".liHidden").show("slow").removeClass("liHidden");
    }

    function AddListen() {
        $.ajax({
            timeout: 1200000,
            url: _Config.ListenUrl,
            type: "GET",
            success: ListenSuccess,
            error: ListenError,
            dataType: "json",
            data: { _type: "AddListen" },
            cache: false
        });
    }
    function ListenSuccess(data, textStatus) {
        for (var i = 0; i < data.length; i++) {
            var type = data[i].toString();
            switch (type) {
                case "UserLogin": _FunUserLogin(); break;
                case "UserOut": _FunUserOut(); break;
                case "NewMsg": break;
                default: break;
            }
        }
        AddListen();
    }
    function ListenError(XMLHttpRequest, textStatus, errorThrown) {
        AddListen();
    }

    //下载新登陆用户信息
    function _FunUserLogin() {
        _Config.Parameter = { _type: "GetNewLoginUser", DLLastUserLoginTime: _Config.DLLastUserLoginTime.toLocaleString() };
        $.get(_Config.url, _Config.Parameter, function (data) {
            AddUserToShow(data);
        }, "json");
    }

    //下载处理用户退出
    function _FunUserOut() {
        _Config.Parameter = { _type: "GetLoginOutUser", DLLastUserLoginOutTime: _Config.DLLastUserLoginOutTime.toLocaleString() };
        $.get(_Config.url, _Config.Parameter, function (data) {
            var idStr = "";
            for (var i = 0; i < data.length; i++) {
                idStr += ",#liUser_" + data[i]["UserID"];
                var _LoginOutTime = data[i]["LoginOutTime"].match(/^\/Date\((\d+)([-+]\d\d)(\d\d)\)\/$/);
                _LoginOutTime = new Date(1 * _LoginOutTime[1] + 3600000 * _LoginOutTime[2] + 60000 * _LoginOutTime[3]);
                if (_LoginOutTime > _Config.DLLastUserLoginOutTime) {
                    _Config.DLLastUserLoginOutTime = _LoginOutTime;
                }
            }
            if (idStr != "") {
                idStr = idStr.substring(1);
                $(idStr).hide("slow").remove();
            }
        }, "json");
    }
</script>
</head>
<body>
<div id="MainDiv">
    <div id="Body_UpDiv">
        <div id="Body_Up_MsgShow">
        <ul id="Body_Up_MsgShow_ul">
            <li>
                <div>
                    <div>UserName&nbsp;&nbsp;&nbsp;&nbsp;MsgDate</div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;Msg Text Countent</div>
                    <br />
                </div>
            </li>
            <li>
                <div>
                    <div>UserName&nbsp;&nbsp;&nbsp;&nbsp;MsgDate</div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;Msg Text Countent</div>
                </div>
                <br />
            </li>
            <li>
                <div>
                    <div>UserName&nbsp;&nbsp;&nbsp;&nbsp;MsgDate</div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;Msg Text Countent</div>
                </div>
                <br />
            </li>
            <li>
                <div>
                    <div>UserName&nbsp;&nbsp;&nbsp;&nbsp;MsgDate</div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;Msg Text Countent</div>
                </div>
                <br />
            </li>
            <li>
                <div>
                    <div>UserName&nbsp;&nbsp;&nbsp;&nbsp;MsgDate</div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;Msg Text Countent</div>
                </div>
                <br />
            </li>
            <li>
                <div>
                    <div>UserName&nbsp;&nbsp;&nbsp;&nbsp;MsgDate</div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;Msg Text Countent</div>
                </div>
                <br />
            </li>
            <li>
                <div>
                    <div>UserName&nbsp;&nbsp;&nbsp;&nbsp;MsgDate</div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;Msg Text Countent</div>
                </div>
                <br />
            </li>
        </ul>
        </div>
        <div id="Body_Up_UserShow">
        <ul id="Body_Up_UserShow_ul">
            <li>
                <div><input type="checkbox" id="User_1" value="1" /><label for="User_1">LiuJu</label></div>
            </li>
            <li>
                <div>UserName</div>
            </li>
            <li>
                <div>UserName</div>
            </li>
            <li>
                <div>UserName</div>
            </li>
            <li>
                <div>UserName</div>
            </li>
            <li>
                <div>UserName</div>
            </li>
            <li>
                <div>UserName</div>
            </li>
            <li>
                <div>UserName</div>
            </li>
            <li>
                <div>UserName</div>
            </li>
        </ul>
        </div>
    </div>
    <div id="Body_DownDiv">
        <div id="Body_Down_InputText">
            <textarea id="txtInputText" rows="5" cols=""></textarea>
        </div>
        <div id="Body_Down_SendButton">
            <button><span>发送</span></button>
        </div>
    </div>
</div>
</body>
</html>
